<template>
    <div class="commoncon register">
        <Other-Header @changelang="changeLanguage" bgColor="#5741d9"></Other-Header>
        <div class="comcont">
            <div class="layer" style="overflow:hidden;">
                <div class="sideinfo">
                    <img src="../assets/images/sideimg2.png" >
                    <h2>{{$t('l.personal_252')}}</h2>
                    <p>{{$t('l.personal_253')}}</p>
                </div>
                <!--找回密码-->
                <div class="logonpanel">
                    <h2 class="paneltitle">{{$t('l.add_34')}}</h2>
                    <div class="regModetab">
                        <span :class="regMode=='phone'?'active':''" @click="regMode='phone'">{{$t('l.personal_254')}}</span>
                        <span :class="regMode=='email'?'active':''" @click="regMode='email'">{{$t('l.personal_255')}}</span>
                    </div>
                    <div class="regModeCon" v-show="regMode=='phone'">
                        <div class="putgroup clearfix">
                            <div class="areacodeput">
                                <input @focus="showlist" v-model="selectValue" />
                                <drop-down @inputValue="getInputValue" @item-click="itemClick" :itemlist="datalist" :placeholder="placeholder" :nodatatext="nodatatext" :isShow="isShow" style="width:349px;"></drop-down>
                            </div>
                            <input class="comput" v-model="account" :placeholder="$t('l.personal_256')" style="width:225px;">
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup">
                            <nc-slider @callback="ncPhoneHandle"></nc-slider>
                        </div>
                        <div class="putgroup">
                            <div class="codeput">
                                <input class="comput" v-model="code" :placeholder="$t('l.personal_44')">
                                <button v-show="sendAuthCode" class="getcode active" @click="sendPhoneCode" :disabled="!this.ncPhonePass">{{$t('l.personal_45')}}</button>
                                <button v-show="!sendAuthCode" class="getcode">{{auth_time}}s</button>
                            </div>
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup">
                            <input class="comput" v-model="password" type="password" :placeholder="$t('l.personal_257')">
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup">
                            <input class="comput" v-model="rePassword" type="password" :placeholder="$t('l.personal_258')">
                            <p class="errortext"></p>
                        </div>
                    </div>
                    <div class="regModeCon" v-show="regMode=='email'">
                        <div class="putgroup clearfix">
                            <input class="comput" v-model="account" :placeholder="$t('l.add_35')">
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup">
                            <nc-slider @callback="ncEmailHandle"></nc-slider>
                        </div>
                        <div class="putgroup">
                            <div class="codeput">
                                <input class="comput" v-model="code" :placeholder="$t('l.personal_44')">
                                <button v-show="sendAuthCode" class="getcode active" @click="sendEmailCode" :disabled="!this.ncEmailPass">{{$t('l.personal_45')}}</button>
                                <button v-show="!sendAuthCode" class="getcode">{{auth_time}}s</button>
                            </div>
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup">
                            <input class="comput" v-model="password" type="password" :placeholder="$t('l.personal_257')">
                            <p class="errortext"></p>
                        </div>
                        <div class="putgroup">
                            <input class="comput" v-model="rePassword" type="password" :placeholder="$t('l.personal_258')">
                            <p class="errortext"></p>
                        </div>
                    </div>
                    
                    <a class="btn big" @click="getPassword">{{$t('l.advert_about23')}}</a>
                    <p class="regandforget clearfix">
                        <router-link to="/register" class="fl">{{$t('l.personal_259')}}</router-link>
                        <router-link to="/login" class="fr">{{$t('l.personal_260')}}</router-link>
                    </p>
                    <p class="sgcinfo">{{$t('l.personal_261')}}</p>
                </div>
            </div>    
        </div>
        <Footer></Footer>
        
    </div>
</template>
<style lang="less">
.register{
	padding-top: 100px;
	
    .comcont {
        padding-bottom: 220px;
    }
    .sideinfo{
        margin-left:130px;
        margin-top:105px;
        text-align:center;
        float:left;
        img{
            padding-bottom:31px;
                max-height: 300px;
        }
        h2{
            font-size:28px;
            font-weight:500;
            color:rgba(51,56,94,1);
            line-height:40px;
            text-align:center;
        }
        p{
            font-size:16px;
            color:#33385E;
            line-height:27px;
            font-weight:400;
            width:242px;
            padding-top:12px;
            margin:0 auto;
        }
    }
    .logonpanel{
        float:left;
        width: 452px;
        padding:0 55px 46px 48px;
        background:#fff;
        box-shadow:0px 6px 18px 0px rgba(29,35,93,0.06);
        border-radius:10px;
        margin-top:82px;
        margin-left:80px;
        min-height:503px;
        position: relative;
        box-sizing: border-box;
        .regModetab{
            padding-top:20px;
            padding-bottom:24px;
            text-align:center;
            span{
                font-size:16px;
                color:#33385E;
                line-height:100%;
                padding-bottom:6px;
                box-sizing: border-box; 
                margin:0 10px;
                cursor:pointer;
                &.active{
                    color:#2D8DFE;
                    border-bottom:2px solid #2D8DFE;
                }
            }
        }
        .paneltitle{
            padding-top:34px;
            text-align:center;
            font-size:22px;
            font-familyA:"Roboto-Medium";
            font-weight:500;
            color:rgba(51,56,94,1);
            line-height:25px;
        }
        .regandforget{
            padding-top:14px;
            a{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
            }
        }
        .sgcinfo{
            margin-top:45px;
            padding-left:45px;
            font-size:16px;
            font-weight:400;
            color:rgba(51,56,94,1);
            line-height:26px;
            width:350px;
            box-sizing:border-box;
            background:url(../assets/images/sgcico.png) no-repeat left center;
        }
        .codetip{
            padding-bottom:34px;
            font-size:16px;
            color:#33385E;
            line-height:100%;
            height:50px;
            box-sizing: border-box;
        }
    }
}

</style>

<script>
import OtherHeader from "../components/otherHeader";
import Footer from "../components/footer";
import dropDown from "../components/dropdown";
import {api} from '../api/api';
import md5 from 'js-md5';
import NC from "../components/nc";
export default {
    components: {
        OtherHeader,
        Footer,
        dropDown,
        'nc-slider': NC
    },
    data() {
        return {
           itemlist: [],
           datalist:[],
            placeholder: this.$t('l.add_36'),
            nodatatext: this.$t('l.add_37'),
            selectValue: "+86",
            isShow:false,
            regMode:'phone',
            account:'',
            code:'',
            password:'',
            rePassword:'',
            sendAuthCode:true,
            auth_time: 0, 
            ncPhone: null,
            ncEmail: null,
            ncPhonePass: false,
            ncEmailPass: false,
            ncPhoneData: null,
            ncEmailData: null
        }
    },
    created(){
        
    },
    methods:{
        changeLanguage(){
            
        },
        ncReset() {
            this.ncPhoneData = null
            this.ncPhonePass = false
            this.ncEmailData = null
            this.ncEmailPass = false
            this.ncPhone && this.ncPhone.reset()
            this.ncEmail && this.ncEmail.reset()
        },
        ncPhoneHandle(nc, data) {
            this.ncPhone = nc
            this.ncPhoneData = data
            this.ncPhonePass = true
        },
        ncEmailHandle(nc, data) {
            this.ncEmail = nc
            this.ncEmailData = data
            this.ncEmailPass = true
        },
        getAuthCode() {
            this.sendAuthCode = false;
            this.auth_time = 120;
            var auth_timetimer =  setInterval(()=>{
                this.auth_time--;
                if(this.auth_time<=0){
                    this.sendAuthCode = true;
                    clearInterval(auth_timetimer);
                }
            }, 1000);
        },    
        itemClick(data) {
            this.selectValue= data.code;
            this.isShow = false;
        },
        getInputValue(searchvalue) {
            if(searchvalue==""){
                this.datalist = this.itemlist;
                return;
            }
            let itemlist = [];
            // 请求获取筛选列表
            this.itemlist.forEach((item,index)=>{
                if(item.code.indexOf(searchvalue) != -1){
                    itemlist.push(item);
                }else if(item.name.indexOf(searchvalue) != -1){
                    itemlist.push(item);
                }
            })
            this.$set(this.datalist,itemlist);
        },
        showlist(){
            this.isShow = true;
        },
        //找回密码
        async getPassword(){
            let that = this;
            let ncData = this.regMode=='phone' ? this.ncPhoneData : this.ncEmailData;
            if(that.account==""){
                that.$layer.msg(that.$t('l.add_38'));
                return;
            }else if(that.password==""){
                that.$layer.msg(that.$t('l.add_39'));
                return;
            }else if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,21}$/.test(that.password)){
                that.$layer.msg(that.$t('l.add_40'));
                flag = true;
            }else if(that.rePassword!==that.password){
                that.$layer.msg(that.$t('l.add_41'));
                return;
            }
            let res = await api.forgetPwd({
                account:that.account,
                password:md5(that.password),
                verifyCode:that.code,
                
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.add_42'));
                that.$router.push({
                    path: "/login"
                });
            }else if(res.data.code==12002){
                that.$layer.msg(that.$t('l.add_80'));
            }else if(res.data.code==1020003){
                that.$layer.msg(that.$t('l.add_87'));
            }else if(res.data.code==12004){
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==12005){
                that.$layer.msg(that.$t('l.add_86'));
            }else{
                this.ncReset();
                that.$layer.msg(res.data.msg);
            }
        },
        //发送验证码
        async sendEmailCode(){
            let that = this;
            let ncData = this.regMode=='phone' ? this.ncPhoneData : this.ncEmailData;
            let res = await api.sendEmailCodelogin({
                email:that.account,
                type:"R",
                ncToken: ncData && ncData.nc_token,
                sessionId: ncData && ncData.sessionid,
                sig: ncData && ncData.sig,
                'scene':'nc_login'
            })
            if(res.data.code==0){
                that.getAuthCode();
                that.$layer.msg(that.$t('l.other_a_38'));
            }else if(res.data.code==12002){
                that.$layer.msg(that.$t('l.add_80'));
            }else if(res.data.code==1020003){
                that.$layer.msg(that.$t('l.add_87'));
            }else if(res.data.code==12004){
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==12005){
                that.$layer.msg(that.$t('l.add_86'));
            }else if(res.data.code==12000){
                that.$layer.msg(that.$t('l.add_119'));
            }else if(res.data.code==1010003){
                that.$layer.msg(that.$t('l.personal_73'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //发送手机验证码
        async sendPhoneCode(){
            let that = this;
            let ncData = this.regMode=='phone' ? this.ncPhoneData : this.ncEmailData;
            let res = await api.sendPhoneCodelogin({
                areaCode:that.selectValue,
                phone:that.account,
                type:"R",
                ncToken: ncData && ncData.nc_token,
                sessionId: ncData && ncData.sessionid,
                sig: ncData && ncData.sig,
                'scene':'nc_login'
            })
            if(res.data.code==0){
                that.$layer.msg(that.$t('l.other_a_38'));
                that.getAuthCode();
            }else if(res.data.code==12002){
                that.$layer.msg(that.$t('l.add_80'));
            }else if(res.data.code==1020003){
                that.$layer.msg(that.$t('l.add_87'));
            }else if(res.data.code==12004){
                that.$layer.msg(that.$t('l.add_79'));
            }else if(res.data.code==12005){
                that.$layer.msg(that.$t('l.add_86'));
            }else if(res.data.code==12000){
                that.$layer.msg(that.$t('l.add_119'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //获取区号
        async getAreacode(){
            let that = this;
            let res = await api.selectList({
                category:"AREA_CODE",
                language:"zh_CN"
            })
            if(res.data.code==0){
                that.datalist = [];
                res.data.data.forEach((item,index)=>{
                    that.datalist.push({
                        code:item.value,
                        name:item.name
                    });
                })
            }
        },
    },
    mounted(){
        this.getAreacode();
    }
}
</script>

